// let changeColor = document.getElementById("changeColor")

// chrome.storage.sync.get('color', function (data) {
//     changeColor.style.backgroundColor = data.color;
//     changeColor.setAttribute('value', data.color);
// })

// changeColor.onclick = function (element) {
//     chrome.storage.sync.set({ replyAll: false });
//     let color = element.target.value;
//     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//         chrome.tabs.executeScript(
//             tabs[0].id,
//             { code: 'document.body.style.backgroundColor = "' + color + '";' });
//     });
// };

const colorCards = [
    { "name": "精白", "color": "#ffffff" },
    { "name": "银白", "color": "#e9e7ef" },
    { "name": "铅白", "color": "#f0f0f4" },
    { "name": "霜色", "color": "#e9f1f6" },
    { "name": "雪白", "color": "#f0fcff" },
    { "name": "莹白", "color": "#e3f9fd" },
    { "name": "月白", "color": "#d6ecf0" },
    { "name": "象牙白", "color": "#fffbf0" },
    { "name": "缟", "color": "#f2ecde" },
    { "name": "蔚蓝", "color": "#70f3ff" },
    { "name": "蓝", "color": "#70f3ff" },
    { "name": "碧蓝", "color": "#3eede7" },
    { "name": "石青", "color": "#1685a9" },
    { "name": "靛青", "color": "#177cb0" },
    { "name": "靛蓝", "color": "#065279" },
    { "name": "花青色", "color": "#003472" },
    { "name": "宝蓝", "color": "#4b5cc4" },
    { "name": "蓝灰", "color": "#a1afc9" },
    { "name": "紫檀", "color": "#4c221b" },
    { "name": "绀青", "color": "#003371" },
    { "name": "紫棠", "color": "#56004f" },
    { "name": "青莲", "color": "#801dae" },
    { "name": "群青", "color": "#4c8dae" },
    { "name": "绀青", "color": "#b0a4e3" }
]



layui.use(['layer'], () => {
    var layer = layui.layer;

    for (const container of document.getElementsByClassName('color-card-container')) {
        container.innerHTML = colorCards.reduce((rs, item) => {
            return rs + `
            <div class="color-card" style="background-color:${item.color}">
                <div>${item.name}</div>
                <div>${item.color}</div>
                <span class="clipboard-btn" data-clipboard-text="${item.color}">点击复制</span>
            </div>
            `
        }, '');
    }



    // 复制到剪切板
    var clipboard = new ClipboardJS('.clipboard-btn');
    clipboard.on('success', (e) => {
        layer.msg('复制成功 ' + e.text);
    });
    clipboard.on('error', (e) => {
        layer.msg(e)
    })
})

